<template>
  <div class="password-input-wrapper">
    <input
      :type="ifShowPwd ? 'text' : 'password'"
      :placeholder="placeholder"
      @change.stop="$emit('change', $event)"
    />
    <i
      class="iconfont icon-eye show-pwd-btn"
      :class="{ colorBlue: ifShowPwd }"
      @click="toggleShowPwd"
    ></i>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

defineProps<{
  placeholder: string
}>()

let ifShowPwd = ref(false)

function toggleShowPwd() {
  ifShowPwd.value = !ifShowPwd.value
}
</script>

<style lang="scss" scoped>
@import 'style/config';
$w: $passwordInputWidth;
$h: $passwordInputHeight;
$fs: $passwordInputFontsize;
$atom: calc($fs / 15);

.password-input-wrapper {
  box-sizing: border-box;
  width: $w;
  height: $h;

  border-radius: calc($fs / 5);
  border-bottom: $atom solid #ddd;
  transition: 0.1s;

  &:focus-within {
    box-shadow: calc($atom * 2) calc($atom * 2) calc($atom * 3) #ccc;
  }

  input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: $h;
    font-size: $fs;
    padding: 0 calc($fs / 2);
    background-color: transparent;
  }

  .show-pwd-btn {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    font-size: $fs;

    &:hover {
      cursor: pointer;
      color: var(--blue);
    }
  }
}
</style>
